<template>
    <div class="companyOperations-box">
        <!-- 公司经营 -->
        <FirmTableComponents :color="color" :bg="bg" :Timeline="Timeline" :firmTable="firmTable" :total="total" :sift="false"
            :page="page" :limit="limit" :pageSize="pageSize" @optionTime="optionTime"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange" @updatePage="updatePage"
            @updateLimit="updateLimit" :firmTableData="firmTableData">
            <el-form :inline="true" :model="firmFrom" class="demo-form-inline" ref="formRef">
                <el-form-item label="公司名称" prop="firmName">
                    <el-input v-model="firmFrom.firmName" clearable />
                </el-form-item>
                <!-- <el-form-item label="日期" prop="time">
                    <el-date-picker v-model="firmFrom.time" type="daterange" start-placeholder="开始时间"
                        end-placeholder="结束世间" :default-time="defaultTime" format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD" />
                </el-form-item> -->

                <el-form-item label="负责人" prop="leader">
                    <el-input v-model="firmFrom.leader" clearable />
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" @click="onReset(formRef)" class="reset" icon="Search">重置</el-button>
                    <el-button type="primary" @click="onSubmit(firmFrom)" class="submit" icon="Refresh">查找</el-button>
                </el-form-item>
            </el-form>
        </FirmTableComponents>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import FirmTableComponents from '@/components/firm/FirmTableComponents.vue'

let color = ref('#333')
let bg = ref('#F6F6F6')
let formRef = ref(null)
// 每页显示条目个数
const pageSize = ref([10, 20, 30, 50])
// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let page = ref(1)
// 条数
let limit = ref(20)
// 存储勾选框的对象
let multipleSelection = ref(null)
// 
let Timeline = ref([
    {
        time: '年度',
        index: 0,
    },
    {
        time: '季度',
        index: 1,
    },
    {
        time: '月度',
        index: 2,
    }
])

// 公司表单数据
let firmFrom = ref({
    firmName: '',
    time:'',
    leader: '',
})
// 公司表格表头数据
let firmTableData = ref([
    {
        prop: 'firmName',
        label: '公司名称'
    },
    {
        prop: 'majorProjects',
        label: '重大项目数'
    },
    {
        prop: 'accountsTotalMoney',
        label: '账款总额(万元)',
        conversion:true
    },
    {
        prop: 'projectTotal',
        label: '项目总数'
    },
    {
        prop: 'loss',
        label: '亏损(%)'
    },
    {
        prop: 'profit',
        label: '利润(%)'
    },
    {
        prop: 'recovery',
        label: '欠款回收率(%)'
    },
    {
        prop: 'businessTotal',
        label: '经营总额(万元)',
        conversion:true
    },
    {
        prop: 'leader',
        label: '负责人'
    },
])
// 公司表格
let firmTable = ref([
    {
        firmName: '南阳分公司',
        majorProjects: '20',
        accountsTotalMoney: '31419109.36',
        projectTotal: '300',
        loss: '0',
        profit: '34.48%',
        recovery: '14%',
        businessTotal: '11049190.94',
        leader: '慎',
        orderId:88
    },
    {
        firmName: '郑州分公司',
        majorProjects: '23',
        accountsTotalMoney: '16383758.62',
        projectTotal: '300',
        loss: '0',
        profit: '36.10%',
        recovery: '14%',
        businessTotal: '6978791.63',
        leader: '慎平',
        orderId:0
    },
    {
        firmName: '新媒体信息化公司',
        majorProjects: '24',
        accountsTotalMoney: '14096299.11',
        projectTotal: '300',
        loss: '0',
        profit: '14.06%',
        recovery: '14%',
        businessTotal: '8709757.42',
        leader: '慎平',
        orderId:1
    },
    {
        firmName: '武汉分公司',
        majorProjects: '19',
        accountsTotalMoney: '9865320.47000001',
        projectTotal: '300',
        loss: '0',
        profit: '24.87%',
        recovery: '14%',
        businessTotal: '2517622.75',
        leader: '慎平',
        orderId:2
    },
    {
        firmName: '营销策划公司',
        majorProjects: '36',
        accountsTotalMoney: '4756117.35',
        projectTotal: '300',
        loss: '0',
        profit: '51.30%',
        recovery: '14%',
        businessTotal: '2980553.98',
        leader: '慎平',
        orderId:3
    },
    {
        firmName: '浙闽分公司',
        majorProjects: '24',
        accountsTotalMoney: '1306854.25',
        projectTotal: '300',
        loss: '0',
        profit: '24.57%',
        recovery: '14%',
        businessTotal: '1307484.25',
        leader: '慎平',
        orderId:4
    },
    {
        firmName: '西北公司',
        majorProjects: '21',
        accountsTotalMoney: '2434775.6',
        projectTotal: '300',
        loss: '0',
        profit: '43.31%',
        recovery: '14%',
        businessTotal: '2434775.6',
        leader: '慎平',
        orderId:5
    },
    {
        firmName: '户外媒体',
        majorProjects: '29',
        accountsTotalMoney: '4000000',
        projectTotal: '300',
        loss: '0',
        profit: '0',
        recovery: '14%',
        businessTotal: '4000000',
        leader: '慎平',
        orderId:6
    },
    {
        firmName: '资质管理',
        majorProjects: '64',
        accountsTotalMoney: '110160.4',
        projectTotal: '300',
        loss: '0',
        profit: '56.84%',
        recovery: '14%',
        businessTotal: '95150',
        leader: '慎平',
        orderId:7
    },
    {
        firmName: '北京海南',
        majorProjects: '0',
        accountsTotalMoney: '200',
        projectTotal: '300',
        loss: '0',
        profit: '0',
        recovery: '14%',
        businessTotal: '0',
        leader: '慎平',
        orderId:8
    },
    {
        firmName: '车间加工厂',
        majorProjects: '89',
        accountsTotalMoney: '392974.3',
        projectTotal: '300',
        loss: '0',
        profit: '84.68%',
        recovery: '14%',
        businessTotal: '1971624.57',
        leader: '慎平',
        orderId:9
    },
    {
        firmName: '投资控股公司',
        majorProjects: '0',
        accountsTotalMoney: '1292730.66',
        projectTotal: '300',
        loss: '0',
        profit: '59.54%',
        recovery: '14%',
        businessTotal: '1294707.36',
        leader: '慎平',
        orderId:9
    },
    {
        firmName: '工程项目',
        majorProjects: '91',
        accountsTotalMoney: '18828127.05',
        projectTotal: '300',
        loss: '0',
        profit: '33.68%',
        recovery: '14%',
        businessTotal: '7145901.98',
        leader: '慎平',
        orderId:9
    },
    
])
// 重置
const onReset = (v) => {
    if (!v) return
    v.resetFields()
}
// 选中的时间
const optionTime = (v) => {
    console.log(v);

}
// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
    console.log(v);
}
let arr = JSON.parse(JSON.stringify(firmTable.value))
// 查找 🤣🤣🤣🤣🤣🤣🤣
const onSubmit = (el) => {
    let {firmName,time,leader} = el
    if(firmName){
        firmTable.value = arr.filter(v=>{
           return v.firmName == el.firmName
        })
    }else if(leader){
        firmTable.value = arr.filter(v=>{
           return v.leader == el.leader
        })
    }else if(firmName && leader){
        firmTable.value = arr.filter(v=>{
           return v.leader == el.leader &&  v.firmName == el.firmName 
        })
    }else{
        firmTable.value = arr
    }
    console.log(arr);
}
// 分页器大小  当前分页器
const handleChange = (v) => {
    console.log(v);
    limit.value = v.page.limit
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log(v);
}
</script>
<style scoped lang='scss'>
.companyOperations-box {
    :deep(.el-date-editor) {
        width: 280px;
    }

    .reset {
        background-color: #fff;
        color: #333;
    }
    .btn{
        margin-left: 32px;
    }
}
</style>
